<template>
  <div class="container" :class="tabsClass" v-if="videos.length">
    <div class="tab-group" ref="tabsRef">
      <div
        v-for="item in videos"
        :key="item.name"
        @click="handleSwitchVideo(item.id)"
        :class="['tab-item', selectedVideo.id == item.id ? 'active' : '']"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="video-container" ref="videoContainerRef">
      <liveVideo :url="selectedVideo.url" :id="`videojs-${selectedVideo.id}`" />
    </div>
  </div>
  <div class="container no-video" v-else>
    <span>暂无视频</span>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import liveVideo from './components/liveVideo.vue'
const props = defineProps({
  active: {
    type: String,
    default: '',
  },
  videos: {
    type: Array,
    default: () => [],
  },
  position: {
    type: String,
    default: 'left-top',
  },
})

const selectedIndex = computed(() => props.videos.findIndex((item) => item.id == props.active))

const selectedVideo = computed(() => props.videos[selectedIndex.value])

const emits = defineEmits(['update:active'])
// 切换视频
const handleSwitchVideo = (id) => {
  emits('update:active', id)
}

// tab位置样式
const tabsClass = computed(() => {
  return props.position
})
</script>

<style lang="scss" scoped>
$space: 15px; // tab标签与视频间距
.container {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 33, 90, 0.4);
  padding: 20px; /* 给整个组件添加间距 */
  display: flex;
  .tab-group {
    display: flex;
    gap: 12px;
    .tab-item {
      width: 167px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      background: #0c2540;
      color: #b9e4ff;
    }
    .active {
      background: linear-gradient(180deg, rgba(1, 72, 98, 0.2) 0%, #00baff 54%, rgba(93, 209, 255, 0.2) 100%);
    }
  }
}

.left-top,
.right-top,
.left-bottom,
.right-bottom {
  flex-direction: column;
  .tab-group {
    order: 1;
  }
}
.right-top,
.left-top {
  .video-container {
    margin-top: $space;
  }
}
.left-bottom,
.right-bottom {
  .tab-group {
    order: 2;
  }
  .video-container {
    margin-bottom: $space;
  }
}

.right-top,
.right-bottom {
  .tab-group {
    justify-content: flex-end;
  }
}
.left-side,
.right-side {
  .tab-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.left-side .video-container {
  margin-left: $space;
}
.right-side {
  .tab-group {
    order: 2;
  }
  .video-container {
    margin-right: $space;
  }
}
.video-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  order: 1;
}
.no-video {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
}
</style>
